<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue生命周期函数之mounted</title>
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
    <div id = "root">
        <span v-bind:style = "{opacity:opacity}">欢迎学习VUE</span>
        {{change()}}
    </div>

    <script type="text/javascript">
        new Vue({
            el:"#root",
            data:function(){
                return {
                    opacity:1
                }
            },
            methods:{
                change:function(){
                    setInterval(()=>{  //注意此处使用的是箭头函数，this会向上层找到VM对象。不被vue管理的对象，全部写成箭头函数
                        this.opacity -= 0.01
                        if(this.opacity <= 0) this.opacity=1  //opacity的修改将引起模板的重新解析，此时不断循坏调用插值语法中的函数，导致定时器嵌套循坏调用。
                    })
                }
            }
        })
    </script>
    
</body>
</html>